<link href="${mvcPath}/dacp-lib/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen"/>
<link rel="stylesheet" href="${mvcPath}/dacp-lib/ace/css/font-awesome.css">
<link href="${mvcPath}/dacp-lib/fuelux/fuelux.min.css" type="text/css" rel="stylesheet" media="screen"/>
<link href="${mvcPath}/dacp-res/catalog/css/card.css" type="text/css" rel="stylesheet" media="screen"/>
 <style>
body {
/* 	-moz-user-select: none; */
/* 	overflow: auto; */
}
.repeater, .repeater-header, .repeater-footer {
	border-radius: 0;
}
.repeater-footer{
    height:30px;
    line-height:30px;
}
.repeater {
	border: 0;
}
.repeater-viewport {
    min-height: 80px;  
}
.repeater-canvas {
	padding: 20px 0;
	height: inherit;
    overflow: auto;
}
.repeater-canvas .container{
    padding:0px;
}
.repeater-header{
    background-color:white;
    border:0px;
    padding:15px 0px;
}
.dacp-tile {
	overflow: hidden;
	margin:10px 0px;
}
.context-menu-active {
	 z-index: 0;
}
.context-menu-list {
    margin: 0;
    margin-left: 0px;
    margin-top: 4px;
    min-width: 120px;
    max-width: 250px;
    font-size: 12px;
    display: inline-block;
    position: absolute;
    list-style-type: none;
    padding: 0px;
    border-top: 5px solid #fcfcfc;
    border-bottom: 5px solid #fcfcfc;
    border: 1px solid #aaa \9;
    box-shadow: 0 10px 80px #555;
    background: #fff;
}
.context-menu-list .context-menu-item {
    display: block;
    cursor: pointer;
    white-space: nowrap;
    color: #444;
    line-height: 23px;
    height: 23px;
    position: relative;
    padding: 0 40px 0 15px;
    border: none;
}
.context-menu-list .context-menu-item.context-menu-separator {
    height: 2px;
    line-height: 0;
    border-bottom: 1px solid #ddd;
    margin: 2px 0 2px;
}
.context-menu-list .context-menu-item .font-icon {
    display: inline-block;
    width: 25px;
    font-size: 1.2em;
    color: #888;
}
.context-menu-list .context-menu-item .context-menu-accesskey {
    text-decoration: underline;
}
.menu-type-content li.active{
    color:#40b1fe;
}

.isotope, .isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}


.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.tag{
    display:inline-block;
    padding:0px 10px;
    height:30px;
    text-align:center;
    line-height:30px;
    margin:0px 10px;
    background-color:#6cd9b9;
    color:white;
}
.tag .glyphicon{
    margin-left:10px;
    color:white;
}

</style>
<div class="repeater-container section">
	<div class="repeater" data-staticheight="400px" id="myRepeaterThumbnail">
		<div class="repeater-header container">
		    <div class="search-info row">
		        <div class="search-result col-md-7">
		            <span class="comment">全部结果></span>
		        </div>
				<div class="col-md-4">
					<div class="input-group">
						<div class="input-group-btn">
							<button type="button" class="btn btn-default dropdown-toggle"
								data-toggle="dropdown" aria-haspopup="true"
								aria-expanded="false">
								按资产名称<span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
								<li><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
							</ul>
						</div>
						<input id="obj-name" type="text" class="form-control" placeholder="请输入您想要的操作">
					</div>
					
				</div>
				<div class="col-md-1">
				    <span id="search"> <span class="glyphicon glyphicon-search"></span></span>
				</div>
			</div>
			<div class="dacp-menu">
			    <div class="dacp-menu-content row">
			    <div class="menu-type col-md-12">
			        <div class="menu-type-title col-md-2">安全级别:</div>
			        <div class="menu-type-content col-md-10">
			            <ul id="DESENS_LEVEL" class="col-md-9">
			                <li name="0">0级</li>
			                <li name="1">1级</li>
			                <li name="2">2级</li>
			                <li name="3">3级</li>
			            </ul>
			        </div>
			    </div>
				<!-- 
				<div class="menu-type col-md-12">
			        <div class="menu-type-title col-md-2">计算平台:</div>
			        <div class="menu-type-content col-md-10">
			            <ul id="DBNAME" class="col-md-9">
			                <li name="oracle">oracle</li>
			                <li name="hive">hive</li>
			                <li name="hbase">hbase</li>
			                <li name="gbase">gbase</li>
			                <li name="hdfs">hdfs</li>
			            </ul>
			            <div class="multiselect">
			                <span class="glyphicon glyphicon-plus"></span>多选
			            </div>
			        </div>
			    </div>
			    <div class="menu-type col-md-12">
			        <div class="menu-type-title col-md-2">数据仓库分层:</div>
			        <div class="menu-type-content col-md-10">
			            <ul id="LEVEL_VAL" class="col-md-9">
			                <li name="ODS">ODS</li>
			                <li name="DWD">DWD</li>
			                <li name="DW">DW</li>
			                <li name="DM">DM</li>
			                <li name="DIM">DIM</li>
			                <li name="ST">ST</li>
			            </ul>
			            <div class="multiselect">
			                <span class="glyphicon glyphicon-plus"></span>多选
			            </div>
			            <div class="more-menu">
			                更多<span class="glyphicon glyphicon-triangle-bottom"></span>
			            </div>
			        </div>
			    </div>
			    <div class="business-theme menu-type col-md-12">
			        <div class="menu-type-title col-md-2">业务主题:</div>
			        <div class="menu-type-content col-md-10">
			            <ul id="TOPICNAME" class="col-md-9">
			                <li class="dropdown">
			                    <span title="参与人">参与人主题</span>
			                    <ul class="menu-child">
			                        <li>渠道</li>
			                    </ul>
			                </li>
			                <li class="dropdown">
			                    <span title="服务">服务主题</span>
			                    <ul class="menu-child">
			                        <li>产品</li>
			                        <li>用户</li>
			                    </ul>
			                </li>
			                <li class="dropdown">
			                    <span title="资源">资源主题</span>
			                    <ul class="menu-child">
			                        <li>服务资源</li>
			                    </ul>
			                </li>
			                <li class="dropdown">
			                    <span title="事件">事件主题</span>
			                    <ul class="menu-child">
			                        <li>计费清单</li>
			                    </ul>
			                <li class="dropdown">
			                    <span title="账务">账务主题</span>
			                    <ul class="menu-child">
			                        <li>结算</li>
			                    </ul>
			                </li>
			                <li class="dropdown">
			                    <span title="营销">营销主题</span>
			                    <ul class="menu-child">
			                        <li>客户交互</li>
			                    </ul>
			                </li>
			            </ul>
			        </div>
			    </div>
			    <div class="menu-type col-md-12">
			        <div class="menu-type-title col-md-2">更新频率:</div>
			        <div class="menu-type-content col-md-10">
			            <ul id="CYCLETYPE" class="col-md-9">
			                <li name="DT">日</li>
			                <li name="MM">月</li>
			                <li name="DM">周</li>
			                <li name="YY">年</li>
			                <li name="HM">实时</li>
			                <li name="HH">小时</li>
			            </ul>
			        </div>
			    </div>
			    <div class="menu-type col-md-12">
			        <div class="menu-type-title col-md-2">资产完成度:</div>
			        <div class="menu-type-content col-md-10">
			            <ul class="col-md-9">
			                <li>一级</li>
			                <li>二级</li>
			                <li>三级</li>
			                <li>四级</li>
			                <li>五级</li>
			            </ul>
			        </div>
			    </div>
			    </div>
			</div>
			<div class="menu-content-operate open">
			     <span>展开</span><span class="glyphicon glyphicon-triangle-bottom"></span>
			</div> -->
			</div></div>
		</div>
		<div class="repeater-viewport">
			<div class="repeater-canvas">
				<div class="container">
					<div class="dacp-tiles row"></div>
				</div>
			</div>
			<div class="loader repeater-loader"></div>
		</div>
	</div>
</div>

<script type="text/javascript" src="${mvcPath}/dacp-lib/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="${mvcPath}/dacp-lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${mvcPath}/dacp-lib/underscore/underscore-min.js"></script>
<script src="${mvcPath}/dacp-lib/fuelux/fuelux.min.js"></script>

<script src="${mvcPath}/dacp-lib/jquery-plugins/jquery-contextMenu.js"></script>

<script src="${mvcPath}/dacp-lib/cryptojs/aes.js" type="text/javascript"></script>
<script src="${mvcPath}/crypto/crypto-context.js" type="text/javascript"></script>

<script src="${mvcPath}/dacp-view/aijs/js/ai.core.js"></script>
<script src="${mvcPath}/dacp-view/aijs/js/ai.jsonstore.js"></script>


<script>
(function(){
	//收起展开操作
	selectMenu={DESENS_LEVEL:"",DATANAME:"",DBNAME:"",LEVEL_VAL:"",CYCLETYPE:"",TOPICNAME:""};
	var $dacpMenu=$(".dacp-menu");
	var $menuContentOperate=$(".menu-content-operate");
	var $menuOparateItem=$(".menu-content-operate span:first-child");
	var menuContentHeight=$(".dacp-menu-content").height();
	$menuContentOperate.on("click",function(){
		if($menuContentOperate.hasClass("stop")){
			var data={text:"展开",remove:"stop",add:"open",height:40};
			menuFuc(data);
		}else{
			var data={text:"收起",remove:"open",add:"stop",height:menuContentHeight};
			menuFuc(data);
		}	
	})
	var menuFuc=function(data){
		$menuOparateItem.text(data.text);
		$menuContentOperate.removeClass(data.remove).addClass(data.add);
		$dacpMenu.animate({height:data.height},500);
	}
	
	
	var card = _.template(
		<#include '${tmplURL}' >
		),
		contextURL = '${mvcPath}/${contextURL}',
		itemURL = '${mvcPath}/${itemURL}';
	
	var getMetaObjActionItems = function(objtype){
		var rs = {};
		var defaultItem = {
			accesskey:'i',
			actfun:null,
			disabled:false,
			dockplace:"rightmenu",
			getright:function(){console.log("hello getRight!")},
			icon:" fa fa-folder-open-o",
			name:"打开",
			url:null
		};
		var itemsStr = $.ajax({
			url: contextURL + '?objtype=' + objtype,
			async:false,
			type:'GET'
		}).responseText;
		var items = itemsStr?JSON.parse(itemsStr):[];
		_.each(items, function(item){
			rs[item.actcode] = {};
			_.extend(rs[item.actcode], defaultItem, item, {name: item.actname,icon:item.iconclass});
		});
		return rs;
	};
	var dblClick =function($el){
		$el = $el || $('body');
		$el.find('.dacp-tile').on('dblclick', function(e){
			window.open('${mvcPath}/${profile}?id='+e.currentTarget.id);
		});
	}; 
	var getContextMenu = function(objtype,objid){
		$('.context-menu-list').filter(':visible').trigger('contextmenu:hide');
		var items=null;
		var objInfo=null;
		if(typeof(objtype) == "undefined"||typeof(objid) == "undefined"){
			items = getMetaObjActionItems('*','rightmenu_global');
		}else{
			objtype = objtype||this.objtype; 
			if(objtype == 'folder') return;
			items = getMetaObjActionItems(objtype,'rightmenu');
		}
		
		this.config = this.config||{};
		var contextMenu = this.config.contextMenu||[];//外部传入的菜单
		var menuItems = this.config.menuItems||[];//数据库配置基础上额外配置项
		
		if(contextMenu&&_.keys(contextMenu).length > 0){//优先外部传入
			if(!menuItems||_.keys(menuItems).length==0||!items) return contextMenu;
			for (key in menuItems){
				if(menuItems[key].dealtype == 'add'){
					items[key].icon = " " + items[key].icon;
					contextMenu[key] = items[key];
				}
			}
			return contextMenu;
		}

		//外部未传入,以数据库配置为主
		var resultItems = {};
		var addItems = _.omit(menuItems,_.keys(items));//外部在数据库配置基础上新增的
		for (key in items) {
			items[key].icon = " " + items[key].icon;
			if(items[key].getright){//权限
				items[key].disabled = false;//TODO
				var result = items[key].disabled;
				if(result == 'hide') continue;
				if(result == 'disabled'){
					items[key].disabled = true;
		          // items[key].display = 'none';
				}
			}
			if(menuItems&&menuItems[key]&&menuItems[key].dealtype == 'reload'){
				resultItems[key] = menuItems[key];//外部覆盖部分数据库配置的
			}
			else if(menuItems&&menuItems[key]&&menuItems[key].dealtype == 'delete'){}
			else{
				resultItems[key] = items[key];
			}
		}
		return _.extend(resultItems,addItems);
	};
	var metaAction = function(key ,objtype, objid){
		var items = getMetaObjActionItems(objtype,'rightmenu');
		var item = items[key];
		if(item.actfun){
			eval(item.actfun);
		}
		if(item.url){
			window.open(item.url.replace('/{contextPath}', '').replace('{XMLID}', objid)); 
		}
	};
	var buildContextMenu = function(selector){
		var self=this;
		var runAction = function(key, opts){
			$('.context-menu-list').filter(':visible').trigger('contextmenu:hide');
			var objid = $(this).attr('id');
			var objtype = $(this).attr('objtype');
			if(".repeater-thumbnail-cont,.repeater-list-wrapper"==opts.selector&&key=='paste'){
				var clipboard = JSON.parse(localStorage.clipboard);
				objtype = clipboard.objtype;
				objid = clipboard.objid;
			}
			metaAction(key ,objtype, objid);
		};
	    $.contextMenu({
	    	selector: selector||'.dacp-tile',
	    	build: function($trigger, e) {
	    		var objtype = ($trigger.attr("objtype"));
	            var objid = $trigger.attr("id");
	            var items = getContextMenu(objtype,objid);
	    		return {
	    			callback: runAction,
	    			items:getContextMenu(objtype,objid),
					items1: {
	    				"edit": {name: "Edit", icon: "edit"},
	    				"cut": {name: "Cut", icon: "cut"},
	    				"copy": {name: "Copy", icon: "copy"},
	    				"paste": {name: "Paste", icon: "paste"},
	    				"delete": {name: "Delete", icon: "delete"},
	    				"fold1": {
	    					"name": "Sub group", 
	    					"items": {
	    						"fold1-key1": {"name": "Foo bar"},
	    						"fold2": {
	    							"name": "Sub group 2", 
	    							"items": {
	    								"fold2-key1": {"name": "alpha"},
	    								"fold2-key2": {"name": "bravo"},
	    								"fold2-key3": {"name": "charlie"}
	    							}
	    						},
	    						"fold1-key3": {"name": "delta"}
	    					}
	    				},
	    				"sep1": "---------",
	    				"quit": {
	    					"name": "Quit", 
	    					"icon": function($element, key, item){
	    						return 'context-menu-icon context-menu-icon-quit'; 
	    					}
	    				}
	    			}
	    		}
	    	}
	    });
		$("html").bind("click", function() {
			$('.context-menu-list').filter(':visible').trigger('contextmenu:hide');
		});
	}
	
	$.ajax({
		url: itemURL + '?limit=20',
		type:'GET',
		async:true,
		success:function(data, state){
			$container = $('.dacp-tiles');
			$container.append(card({models:data}));
	        /* $container.isotope({
				itemSelector : '.dacp-tile',
				percentPosition: true
	    
			}); */
			buildContextMenu();
			dblClick($container);
		}
	});
	var updateData=function(param){
		$.ajax({
			url: "${mvcPath}/service/datams/policy",
			type:'GET',
			data:param,
			async:true,
			success:function(data, state){
				console.log(data.length);
				$container = $('.dacp-tiles');
				$('.dacp-tiles').empty();
				$container.append(card({models:data}));
				/* 
				$container.isotope("destroy");
				$container.isotope({
					itemSelector : '.dacp-tile',
					percentPosition: true
				}); 
				*/
				
				buildContextMenu();
				dblClick($container);
			}
		});	
	}
	var selectFunc=function(e,attr,value){
		$("#"+attr+" li").removeClass("active");
		$(e.target).addClass("active");
		$("span."+attr).remove();
		selectMenu[attr]=value;
		var item=$("<span class='tag "+attr+"' title="+attr+"></span>").html(selectMenu[attr]+"<span class='glyphicon glyphicon-remove'></span>");
		$(".search-result").append(item);
		console.log(selectMenu);
		updateData(selectMenu)	
	}
	$("#search").on("click",function(){
		var objName=$("#obj-name").val();
		selectMenu.DATANAME=objName;
		console.log(selectMenu);
		updateData(selectMenu)
	})
	$.each(selectMenu,function(attr){
		if(attr!="TOPICNAME"){
			$("#"+attr+" li").on("click",function(e){
				var value=$(e.target).attr("name");
				selectFunc(e,attr,value);
			})	
		}
	})
	$(".menu-child li").on("click",function(e){
		var attr="TOPICNAME";
	    var value="B域|"+$(e.target).parent().parent().find("span").attr("title")+"|"+$(e.target).text();
	    selectFunc(e,attr,value);
	    $(e.target).parent().parent().addClass("active");
			
	})
	
	$(".search-result").on("click",".glyphicon",function(e){
		var attr=$(e.target).parent().attr("title");
		selectMenu[attr]='';
		console.log(selectMenu);
		$("#"+attr+" li").removeClass("active");
		$(e.target).parent().remove();
		updateData(selectMenu)
	})
})();


/* $('.dacp-tiles').infinitescroll({
    dataSource: function(helpers, callback){
		$.ajax({
			url:'${mvcPath}/catalog/data/objs?limit=20',
			type:'GET',
			async:true,
			success:function(data, state){
				callback({ content: card({models:data}) });
				buildContextMenu();
			}
		});
    }
}); */

</script>